<template>
<div class="leo-top-bar">
    <DxTreeShell :defaultProps="defaultProps" :treeList="tabs" :showCheckbox="false" @node-click="handleNodeClick">
    </DxTreeShell>
</div>
</template>

<script lang="ts">
import {
    Options,
    Vue
} from 'vue-class-component';

import {
    ITabItem,
    FuncObj
} from '../api/types';

import {
    generateTabs
} from '../api/mock';

@Options({
    name: 'topBar',
    components: {
    }
})
export default class extends Vue {
    tabs!: Array < FuncObj > ;
    defaultProps = {
        children: 'children',
        label: 'funcName'
    }

    created() {
        this.tabs = generateTabs();
    }

    /**
     * 选中模块
     */
    selectModule(index: number, func: FuncObj) {
        console.log('selectModule == ', func, "index==" + index);
    }

}
</script>

<style lang="scss" scoped>
.leo-top-bar {
    display: flex;
    width: 100%;
    height: 300px;
}
</style>
